<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/channel.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
</head>

<body>
    <!-- 女频首页头 -->
<div class="channel_header">
    <div class="channel_header_bg">
        <img src="https://c.hotread.com/girlPc/assets/images/newGirlLogo.png" alt="">
        <div class="hotreadAndGirl">
            <span class="on">火星女频</span>
            <span>|</span>
            <span onclick="jumpShouye()">火星小说</span>
        </div>
        <div class="search-content">
            <input type="text" placeholder="弥楼芳时" class="search-text" id="searchInput">
            <img src="../img/channel_search.png" alt="" id="searchBtn">
        </div>
        <div class="main-login">
            <div>
                <span>充值</span>
                <span>|</span>
                <span>书架</span>
            </div>
            <div>
                <span onclick="login()">登录</span>
                <span>|</span>
                <span>注册</span>
            </div>
        </div>
    </div>
</div>
    <!-- 轮播图 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- 轮播下面的条 -->
    <div class="hotr-nav">
        <div class="nav-main">
            <ul class="win-head">
                <li class="on">
                    首页
                </li>
                <li onclick="jumpNvbook()">
                    书库
                </li>
                <li onclick="jumpNvrank()">
                    排行榜
                </li>
                <li onclick="jumpGirlCopyRight()">
                    优质版权
                </li>
            </ul>
            <div class="download">
                <p>下载APP</p>
                <span>|</span>
                <p onclick="jumpAuthor()">作者中心</p>
            </div>
        </div>
    </div>
    <!-- 火星记事 -->
    <div class="hotreadThing">
        <div class="hotreadThing-title">
            <div class="hotreadThing-title-icon"></div>
            <div class="hotreadThing-title-crude">火星纪事</div>
            <div class="hotreadThing-title-fine">火星女频动态资讯</div>
        </div>
        <div class="hotreadThing-concent">
            <div class="hotreadThing-concent-left">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img
                                src="https://p2.duyao001.com/image/common/6c424a5b2e6a649800875287d9fd083a.jpg" alt="">
                        </div>
                        <div class="swiper-slide"><img
                                src="https://p1.duyao001.com/image/common/9ac65e436f31d13053730a717db13f8b.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="hotreadThing-concent-right">
                <div class="hotreadThing-concent-item">
                    <div class="hotreadThing-concent-item-title">
                        恭喜藤萍《吉祥纹莲花楼》入选 中国网络文学影响力榜（2023年度）十大IP影响榜
                    </div>
                    <div class="hotreadThing-concent-item-account">
                        恭喜藤萍大大《吉祥纹莲花楼》入选 中国网络文学影响力榜（2023年度）十大IP影响榜，太厉害啦！
                    </div>
                    <div class="hotreadThing-concent-item-title1">
                        《春花焰》10月14日优酷全网独播，该剧改编自黑颜的小说《春花厌》
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 大家都在看 -->
    <div class="everybody">
        <div class="everybody-title">
            <div class="everybody-title-icon">

            </div>
            <div class="everybody-title-crude">
                大家都在看
            </div>
            <div class="everybody-title-fine">
                火星女频读者们都喜欢这些书
            </div>
        </div>
        <div class="everybody-concent">
            <ul class="everybody-concent-ul">

            </ul>
        </div>
    </div>
    <!-- 星星力推 -->
    <div class="stars">
        <div class="stars-title">
            <div class="stars-title-icon">

            </div>
            <div class="stars-title-crude">
                星星力推
            </div>
            <div class="stars-title-fine">
                火星女频主编推荐，品质保证
            </div>
        </div>
        <div class="stars-content">
            <ul class="stars-content-ul">
                <li class="stars-content-li">
                    <div class="stars-content-li-title">
                        <span class="title">
                            古代言情
                        </span>
                        <div class="more">
                            <span>更多</span>
                            <img src="../img/more.png" alt="">
                        </div>
                    </div>
                    <div class="stars-content-li-content">
                        <img class="stars-content-li-left"
                            src="https://p1.duyao001.com/image/common/4feccd2ed8104046577aa2dfa5e7b2a7_x640.jpg" alt="">
                        <div class="stars-content-li-right">
                            <div class="title">
                                弥楼芳时
                                <span class="blue">
                                    更新中
                                </span>
                            </div>
                            <div class="author">
                                <img src="https://www.iceread.com/assets/images/cover.png" alt="">
                                <span>米兰Lady</span>
                            </div>
                            <div class="content">
                                代表作《孤城闭》、《司宫令》言情作家米兰Lady再筑口碑经典，国内首部宋朝插花文化小说，一窥宋朝的极致审美
                            </div>
                            <div class="lable">
                                <p class="lable-list">古代言情/职业</p>
                                <p class="lable-list">宫廷</p>
                                <p class="lable-list">古色古香</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="stars-content-li">
                    <div class="stars-content-li-title">
                        <span class="title">
                            现代言情
                        </span>
                        <div class="more">
                            <span>更多</span>
                            <img src="../img/more.png" alt="">
                        </div>
                    </div>
                    <div class="stars-content-li-content">
                        <img class="stars-content-li-left"
                            src="https://p1.duyao001.com/image/common/ec858d316988c5493947607df2567b03_x640.jpeg"
                            alt="">
                        <div class="stars-content-li-right">
                            <div class="title">
                                你不需要抱歉
                                <span class="red">
                                    已完结
                                </span>
                            </div>
                            <div class="author">
                                <img src="https://www.iceread.com/assets/images/cover.png" alt="">
                                <span>橘子宸</span>
                            </div>
                            <div class="content">
                                备受影视公司关注的作者橘子宸，最新现实题材都市力作，聚焦女性的真实困境，深度剖析重男轻女背后的故事
                            </div>
                            <div class="lable">
                                <p class="lable-list">都市</p>
                                <p class="lable-list">强强</p>
                                <p class="lable-list">正剧</p>
                                <p class="lable-list">推理</p>
                                <p class="lable-list">婚恋</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="stars-content-li" style="margin-top: 30px;">
                    <div class="stars-content-li-title">
                        <span class="title">
                            二次元
                        </span>
                        <div class="more">
                            <span>更多</span>
                            <img src="../img/more.png" alt="">
                        </div>
                    </div>
                    <div class="stars-content-li-content">
                        <img class="stars-content-li-left"
                            src="https://p1.duyao001.com/image/common/8fa9b48c6cd99dcc1246bf5925f09d11_x640.jpg" alt="">
                        <div class="stars-content-li-right">
                            <div class="title">
                                缥缈9·娑婆卷
                                <span class="blue">
                                    更新中
                                </span>
                            </div>
                            <div class="author">
                                <img src="https://www.iceread.com/assets/images/cover.png" alt="">
                                <span>白姬绾</span>
                            </div>
                            <div class="content">
                                狡诈美艳的天龙女王与纯良特异的书生账房一起见证人世间的贪嗔痴、怨憎会、爱别离、求不得
                            </div>
                            <div class="lable">
                                <p class="lable-list">奇幻</p>
                                <p class="lable-list">幻想</p>
                                <p class="lable-list">轻松幽默</p>
                                <p class="lable-list">古色古香</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="stars-content-li" style="margin-top: 30px;">
                    <div class="stars-content-li-title">
                        <span class="title">
                            古代言情
                        </span>
                        <div class="more">
                            <span>更多</span>
                            <img src="../img/more.png" alt="">
                        </div>
                    </div>
                    <div class="stars-content-li-content">
                        <img class="stars-content-li-left"
                            src="https://p2.duyao001.com/image/common/982e4b88f22a389b59fc815d5c9378e9_x640.jpg" alt="">
                        <div class="stars-content-li-right">
                            <div class="title">
                                邈邈狮子月
                                <span class="blue">
                                    更新中
                                </span>
                            </div>
                            <div class="author">
                                <img src="https://www.iceread.com/assets/images/cover.png" alt="">
                                <span>藤萍</span>
                            </div>
                            <div class="content">
                                爆款电视剧《莲花楼》原著作者，“侠情天后”藤萍最新古装作品
                            </div>
                            <div class="lable">
                                <p class="lable-list">江湖</p>
                                <p class="lable-list">古代悬疑</p>
                                <p class="lable-list">无cp</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 火星资讯 -->
    <div class="stars">
        <div class="stars-title">
            <div class="stars-title-icon">

            </div>
            <div class="stars-title-crude">
                火星资讯
            </div>
        </div>
        <div class="certificate">
            <div class="wrap">
                <div class="listBox">
                    <ul class="list">
                        <li class="item">
                            <img src="https://p0.duyao001.com/image/common/54a4f7194010bdbce86b1197edd1d4e2.jpg" alt=""
                                class="cover">
                            <p class="name">
                                伶九鲁院学习有感：我变成了我小时候最想要成为的人！
                            </p>
                            <div class="desc">
                                "鲁迅文学院一直被誉为“作家的摇篮，文学的殿堂”，从1950年成立到现在，一代又一代文学巨...
                            </div>
                            <div class="defaultCode">
                                <p class="defaultCodeText">
                                    5元/条，微信扫码付费
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 排行榜 -->
    <div class="ranks">
        <div class="ranks-title">
            <div class="ranks-title-icon">

            </div>
            <div class="ranks-title-crude">
                排行榜
            </div>
            <div class="ranks-title-fine">
                优质好文，花式推荐
            </div>
        </div>
        <ul class="ranks-content">
            <li class="ranks-list">
                <div id="rank6276" data-name="rank.ejs">
                    <div class="ranking-typeRank">
                        <div class="rankTitle">
                            积分榜
                        </div>
                        <ul class="onul">

                        </ul>
                        <div class="more">
                            <p>查看更多</p>
                            <img src="../img/more.png" alt="">
                        </div>
                    </div>
                </div>
            </li>
            <li class="ranks-list">
                <div id="rank6276" data-name="rank.ejs">
                    <div class="ranking-typeRank">
                        <div class="rankTitle">
                            月票榜
                        </div>
                        <ul class="onul">

                        </ul>
                        <div class="more">
                            <p>查看更多</p>
                            <img src="../img/more.png" alt="">
                        </div>
                    </div>
                </div>
            </li>
            <li class="ranks-list">
                <div id="rank6276" data-name="rank.ejs">
                    <div class="ranking-typeRank">
                        <div class="rankTitle">
                            订阅榜
                        </div>
                        <ul class="onul">

                        </ul>
                        <div class="more">
                            <p>查看更多</p>
                            <img src="../img/more.png" alt="">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
<!-- 搜索功能 -->
<script>
    // 全局变量管理
const searchState = {
    novelData: [], // 存储接口返回的所有小说数据
    filteredData: [], // 筛选后的数据
    debounceTimer: null, // 防抖定时器
    currentKeyword: '', // 当前搜索关键词
    isLoading: false // 加载状态标识
};

// DOM 元素缓存（基于原始 HTML 结构）
const domElements = {
    searchInput: document.getElementById('searchInput'),
    searchBtn: document.getElementById('searchBtn'),
    // 动态创建结果容器（不修改原始 HTML，追加到搜索框下方）
    resultContainer: (() => {
        const container = document.createElement('div');
        container.id = 'searchResultContainer';
        container.style.cssText = `
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 8px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            z-index: 100;
            max-height: 400px;
            overflow-y: auto;
            display: none;
        `;
        // 将结果容器插入到搜索框父元素中
        document.querySelector('.search-content').appendChild(container);
        return container;
    })()
};

// 初始化：加载小说数据并绑定事件
async function initSearch() {
    // 优先加载接口数据
    await fetchNovelData();
    // 绑定交互事件
    bindSearchEvents();
}

// 调用小说接口获取数据
async function fetchNovelData() {
    try {
        const response = await fetch('https://www.iceread.com/api/common/rank/6273/0/1291');
        if (!response.ok) throw new Error('接口请求失败');
        
        const data = await response.json();
        // 提取小说核心数据（适配接口返回格式）
        searchState.novelData = data.list ? data.list.map(item => item.story || item) : [];
        searchState.filteredData = [...searchState.novelData];
    } catch (error) {
        console.error('小说数据加载失败:', error);
        renderResult(`<div style="padding:16px;text-align:center;color:#999;">数据加载失败，请稍后重试</div>`);
    }
}

// 绑定搜索相关事件
function bindSearchEvents() {
    // 搜索按钮点击
    domElements.searchBtn.addEventListener('click', handleSearch);
    
    // 输入框实时输入（防抖处理）
    domElements.searchInput.addEventListener('input', () => {
        searchState.currentKeyword = domElements.searchInput.value.trim().toLowerCase();
        
        // 清空关键词时隐藏结果容器
        if (!searchState.currentKeyword) {
            domElements.resultContainer.style.display = 'none';
            return;
        }
        
        // 防抖：300ms 内连续输入不触发搜索
        clearTimeout(searchState.debounceTimer);
        searchState.debounceTimer = setTimeout(handleSearch, 300);
    });
    
    // 回车键触发搜索
    domElements.searchInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') handleSearch();
    });
    
    // 点击页面其他区域隐藏结果容器
    document.addEventListener('click', (e) => {
        const isClickInside = domElements.searchInput.contains(e.target) || 
                             domElements.searchBtn.contains(e.target) || 
                             domElements.resultContainer.contains(e.target);
        if (!isClickInside) {
            domElements.resultContainer.style.display = 'none';
        }
    });
}

// 核心搜索逻辑
function handleSearch() {
    const keyword = searchState.currentKeyword;
    
    // 显示加载状态
    showLoading();
    
    // 筛选逻辑：匹配小说名、作者、标签
    searchState.filteredData = searchState.novelData.filter(novel => {
        const matchName = novel.name?.toLowerCase().includes(keyword) || false;
        const matchAuthor = novel.author?.toLowerCase().includes(keyword) || false;
        const matchTag = novel.tag?.toLowerCase().includes(keyword) || false;
        return matchName || matchAuthor || matchTag;
    });
    
    // 渲染搜索结果
    renderResult();
}

// 渲染搜索结果
function renderResult(customContent = '') {
    // 隐藏加载状态
    hideLoading();
    
    // 显示结果容器
    domElements.resultContainer.style.display = 'block';
    
    // 自定义内容渲染（如错误提示）
    if (customContent) {
        domElements.resultContainer.innerHTML = customContent;
        return;
    }
    
    // 无结果处理
    if (searchState.filteredData.length === 0) {
        domElements.resultContainer.innerHTML = `
            <div style="padding:24px;text-align:center;">
                <div style="font-size:24px;color:#ccc;margin-bottom:8px;">&#128270;</div>
                <p style="color:#666;">未找到包含「${searchState.currentKeyword}」的小说</p>
                <p style="color:#999;font-size:12px;margin-top:4px;">建议尝试其他关键词</p>
            </div>
        `;
        return;
    }
    
    // 渲染小说列表
    let resultHtml = '';
    searchState.filteredData.forEach(novel => {
        // 关键词高亮处理
        const highlight = (text) => {
            if (!text || !searchState.currentKeyword) return text;
            const regex = new RegExp(`(${searchState.currentKeyword})`, 'gi');
            return text.replace(regex, '<span style="color:#6366f1;font-weight:500;">$1</span>');
        };
        
        // 小说标签处理
        const tags = novel.tag ? novel.tag.split(',').slice(0, 2) : [];
        const tagHtml = tags.map(tag => `
            <span style="font-size:12px;padding:2px 6px;background:#f3f4f6;color:#666;border-radius:4px;margin-right:4px;">${highlight(tag)}</span>
        `).join('');
        
        // 单个小说项 HTML
        resultHtml += `
            <div style="padding:12px;border-bottom:1px solid #f5f5f5;cursor:pointer;" onmouseover="this.style.background='#fafafa'" onmouseout="this.style.background='transparent'"onclick='jumps(${JSON.stringify(novel)})'>
                <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;">
                    <h4 style="margin:0;font-size:14px;color:#333;">${highlight(novel.name)}</h4>
                    ${novel.isPay === 1 ? '<span style="font-size:12px;color:#ef4444;background:#fee2e2;padding:1px 4px;border-radius:3px;">VIP</span>' : ''}
                </div>
                <p style="margin:0 0 6px 0;font-size:12px;color:#999;">作者：${highlight(novel.author)}</p>
                <div style="margin-bottom:6px;">${tagHtml}</div>
                <p style="margin:0;font-size:12px;color:#666;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
                    ${highlight(novel.introduce ? novel.introduce.slice(0, 100) + '...' : '暂无简介')}
                </p>
            </div>
        `;
    });
    
    domElements.resultContainer.innerHTML = resultHtml;
}

// 显示加载状态
function showLoading() {
    searchState.isLoading = true;
    domElements.resultContainer.style.display = 'block';
    domElements.resultContainer.innerHTML = `
        <div style="padding:24px;text-align:center;">
            <div style="width:20px;height:20px;border:2px solid #6366f1;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 8px;"></div>
            <p style="color:#666;font-size:12px;">正在搜索...</p>
        </div>
    `;
    // 添加加载动画样式
    const style = document.createElement('style');
    style.textContent = `
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(style);
}

// 隐藏加载状态
function hideLoading() {
    searchState.isLoading = false;
}

// 页面加载完成后初始化搜索功能
document.addEventListener('DOMContentLoaded', initSearch);
</script>
<!-- 轮播图 -->
<script src="../js/swiper.min.js"></script>
<script>
    const index_swiper = document.querySelector('.swiper-wrapper')
    fetch("https://www.iceread.com/api/topBanner?cb=1756638924790").then(res => res.json()).then(res1 => {
        // console.log(res1)
        res1.forEach((item) => {
            index_swiper.innerHTML +=
                `
            <div class="swiper-slide">
                <img src="${item.pic}" alt="">
            </div>
        `

        })
        new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop: true,
            autoplay: 2500,
        });

    }).catch(err => {
        console.log(err)
    })
</script>
<!-- 第二个轮播 -->
<script>
    setTimeout(function () {
        var swiperHotread = new Swiper('.swiper-container-hotread', {
            pagination: '.swiper-pagination-hotread',
            nextButton: '.swiper-button-next-hotread',
            prevButton: '.swiper-button-prev-hotread',
            paginationClickable: true,
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: 2500,
            autoplayDisableOnInteraction: false,
            loop: true
        });
    }, 300);
</script>
<!-- 大家都在看 -->
<script>
    const everybody_concent_ul = document.querySelector('.everybody-concent-ul')
    fetch('https://www.iceread.com/api/common/rank/6273/0/6').then(res => res.json()).then(res1 => {
        // console.log(222,res1.list)
        everybody_concent_ul.innerHTML = ''
        res1.list.forEach(item => {
            // console.log(item)
            everybody_concent_ul.innerHTML +=
                `
            <li class="everybody-concent-li" onclick='jumps(${JSON.stringify(item.story)})'>
                <img src="${item.story.cover}" alt="">
                <div class="everybody-concent-title">
                    ${item.story.name}
                </div>
                <div class="everybody-concent-fine">
                    ${item.story.author}
                </div>
                <div class="mask">
                    ${item.story.introduce}
                </div>
            </li>
        `
        })

        // 添加鼠标悬停事件
        const items = document.querySelectorAll('.everybody-concent-li');
        items.forEach(item => {
            item.addEventListener('mouseenter', function () {
                this.classList.add('on');
            });

            item.addEventListener('mouseleave', function () {
                this.classList.remove('on');
            });
        });
    }).catch(err => {
        console.log(err)
    })
</script>
<!-- 火星资讯 -->
<script>
    const list = document.querySelector('.list');

    fetch('https://www.iceread.com/api/certificate/GetItems?cb=1756946423653')
        .then(res => res.json())
        .then(res1 => {
            list.innerHTML = '';

            let items = [];
            if (Array.isArray(res1)) {
                items = res1;
            } else if (res1.data && Array.isArray(res1.data)) {
                items = res1.data;
            } else if (res1.list && Array.isArray(res1.list)) {
                items = res1.list;
            }

            items.slice(0, 3).forEach(item => {
                const li = document.createElement('li');
                li.className = 'item';
                li.innerHTML = `
                    <img src="${item.cover || item.pic || item.image || 'https://www.iceread.com/assets/images/cover.png'}" alt="" class="cover">
                    <p class="name">${item.title || item.name || '默认标题'}</p>
                    <div class="desc">${item.desc || item.content || item.description || '暂无描述'}</div>
                    <div class="defaultCode">
                        <p class="defaultCodeText">5元/条，微信扫码付费</p>
                    </div>
                `;
                list.appendChild(li);
            });
        })
        .catch(err => {
            console.log(err);
        });
</script>
<!-- 排行榜 -->
<!-- 积分榜 -->
<script>
    const onul1 = document.querySelectorAll(".onul")[0];
    fetch("https://www.iceread.com/api/common/rank/6276/0/10?cb=1756950763893")
        .then(res => res.json())
        .then(res1 => {
            onul1.innerHTML = "";

            res1.list.forEach((item, index) => {
                const isFirstItem = index === 0;
                const liClass = isFirstItem ? "on" : "";
                const rank = (index + 1).toString().padStart(2, '0');
                
                onul1.innerHTML += ` 
        <li class="${liClass}"onclick='jumps(${JSON.stringify(item.story)})'>
          <p>${rank}</p>
          <div>
            <span class="bookName">${item.story?.name || '未知书名'}</span>
            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
            <p class="tiket">${item.story.author || 0}</p>
          </div>
          <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
        </li>
      `;
            });

            // 只为当前 onul 下的 li 元素绑定事件
            const liItems = onul1.querySelectorAll("li");
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    // 只移除当前 onul 内的 on 类
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });

        }).catch(err => {
            console.log(err);
        });
</script>
<!-- 月票榜 -->
<script>
    const onul2 = document.querySelectorAll(".onul")[1];
    fetch("https://www.iceread.com/api/common/rank/6264/3/10?cb=1756952141706")
        .then(res => res.json())
        .then(res1 => {
            onul2.innerHTML = "";
            
            res1.list.forEach((item, index) => {
                const isFirstItem = index === 0;
                const liClass = isFirstItem ? "on" : "";
                const rank = (index + 1).toString().padStart(2, '0');
                
                onul2.innerHTML += ` 
        <li class="${liClass}"onclick='jumps(${JSON.stringify(item.story)})'>
          <p>${rank}</p>
          <div>
            <span class="bookName">${item.story?.name || '未知书名'}</span>
            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
            <p class="tiket">${item.story.author || 0}</p>
          </div>
          <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
        </li>
      `;
            });

            // 只为当前 onul 下的 li 元素绑定事件
            const liItems = onul2.querySelectorAll("li");
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    // 只移除当前 onul 内的 on 类
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });

        }).catch(err => {
            console.log(err);
        });    
</script>
<!-- 订阅榜 -->
 <script>
    const onul3 = document.querySelectorAll(".onul")[2];
    fetch("https://www.iceread.com/api/common/rank/6273/0/10?cb=1756952141708")
        .then(res => res.json())
        .then(res1 => {
            onul3.innerHTML = "";
            
            res1.list.forEach((item, index) => {
                const isFirstItem = index === 0;
                const liClass = isFirstItem ? "on" : "";
                const rank = (index + 1).toString().padStart(2, '0');
                
                onul3.innerHTML += ` 
        <li class="${liClass}"onclick='jumps(${JSON.stringify(item.story)})'>
          <p>${rank}</p>
          <div>
            <span class="bookName">${item.story?.name || '未知书名'}</span>
            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
            <p class="tiket">${item.story.author || 0}</p>
          </div>
          <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
        </li>
      `;
            });

            // 只为当前 onul 下的 li 元素绑定事件
            const liItems = onul3.querySelectorAll("li");
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    // 只移除当前 onul 内的 on 类
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });

        }).catch(err => {
            console.log(err);
        });    
 </script>
 <script>
    function jumps(hearf){
       location.href=`./channelDetail.html?${JSON.stringify(hearf)}`
    }
    function jumpShouye(){
        location.href=`./index.html`
    }
    function login(){
        location.href=`./personal.html`
    }
    function jumpGirlCopyRight(){
        location.href=`./girlCopyright.html`
    }
    function jumpAuthor(){
        location.href='./personal.html?'
    }
    function jumpNvbook(){
        location.href=`./channelBook.html`
    }
    function jumpNvrank(){
        location.href=`./channelRank.html`
    }
 </script>
 
</html>